<template>
	<div style="display:flex;width:100vw">
		<LayoutLeft @toLink="menuClick" :menuArr="menuArr" />
		<div id="main" style="position:relative;flex-grow:1">
			<!-- 面包屑导航 -->
			<div v-if="nav === 'breadcrumb'" id="breadcrumb-box">
				<JsBreadcrumb ref="breadcrumb" />
				<div class="flex-hen tab-button" style="width: 36px;">
					<el-tooltip effect="dark" :content="lan('刷新页面')" placement="bottom">
						<i style="font-size: 1.3rem;" class="c-theme hand el-icon-refresh" @click="refresh()"></i>
					</el-tooltip>
				</div>
			</div>
			<!-- 多分页导航 -->
			<div v-else id="tab-box">
				<JsTabs ref="tabs" id="tabs" style="width: calc(100% - 120px);" />
				<div v-if="ui === 'element'" class="flex-hen tab-button">
					<el-tooltip effect="dark" :content="lan('刷新页面')" placement="bottom"><i class="c-theme hand el-icon-refresh" @click="refresh()" /></el-tooltip>
					<el-tooltip effect="dark" :content="lan('关闭所有页面')" placement="bottom"><i class="c-theme hand el-icon-close" @click="closeAll" /></el-tooltip>
					<el-tooltip effect="dark" :content="lan('关闭其他页面')" placement="bottom"><i class="c-theme hand el-icon-circle-close" @click="closeOther" /></el-tooltip>
				</div>

				<div v-else class="flex-hen tab-button">
					<Tooltip effect="dark" :content="lan('刷新页面')" placement="bottom"><Icon type="ios-refresh" class="c-theme hand" size="33" @click="refresh()" /></Tooltip>
					<Tooltip effect="dark" :content="lan('关闭所有页面')" placement="bottom"><Icon type="ios-close" class="c-theme hand" size="40" @click="closeAll" /></Tooltip>
					<Tooltip effect="dark" :content="lan('关闭其他页面')" placement="bottom">
						<Icon type="ios-close-circle-outline" class="c-theme hand" size="25" @click="closeOther" />
					</Tooltip>
				</div>
			</div>

			<div id="content" ref="content" style="height: calc(100vh - 100px);top:38px">
				<JsRouter root ref="JsRouter" @click.native="scollerTop" />
				<footer class="JsFoot" v-if="$route.name !== 'home'">
					<p>
						<span style="margin-left: 1rem;vertical-align: text-bottom;color:#999">
							<template v-for="(item, key) in links">
								<span :key="key" v-if="item.type === 'divider'" :style="fStyle">|</span>
								<a :key="key" v-else target="_blank" :href="item.href">{{ item.title }}</a>
							</template>
						</span>
					</p>
					<p>
						<span>微信：JiessCli</span>
						<span :style="fStyle">|</span>
						<span>QQ群：110937844</span>
						<span :style="fStyle">|</span>
						<span>wgzimg@163.com</span>
						<span :style="fStyle">|</span>
						<span>蜀ICP备19017195号-2</span>
					</p>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
import LayoutLeft from '../LayoutLeft';
import jiess from '@/jiess';
export default {
	name: 'LayoutContent',
	components: {
		LayoutLeft,
		//使用内置的JsTabs组件
		JsTabs: jiess.components.JsTabs,
		//使用内置的JsBreadcrumb组件
		JsBreadcrumb: jiess.components.JsBreadcrumb
	},
	data() {
		return {
			menuArr: [],
			fStyle: {
				margin: '0 10px'
			},
			links: [
				{
					title: '首页',
					href: 'https://www.jiess.net'
				},
				{
					type: 'divider'
				},
				{
					title: 'API',
					href: '/API/start/preface'
				},
				{
					type: 'divider'
				},
				{
					title: '码云',
					href: 'https://gitee.com/wgzimg/JIESS-DEMO'
				}
			]
		};
	},
	computed: {
		nav() {
			return localStorage.storeNav || 'tabs';
		}
	},
	created() {
		this.httpBack(this.$jiess.api.leftMenuList()).then(res => (this.menuArr = res.data));
	},
	methods: {
		lan(title) {
			return this.$mapping.J_i18n(title, title, 'demo.page');
		},
		refresh(name) {
			this.$refs.JsRouter?.toReload(name);
		},
		closeAll() {
			this.$refs.JsRouter.clearAll();
			this.$refs.tabs.closeAll();
		},
		closeOther() {
			const keeps = ['home', this.$route.name];
			this.$refs.JsRouter.clearOther(keeps);
			this.$refs.tabs.closeOther(keeps);
		},
		//跳到顶部
		scollerTop(e) {
			if (e.target.classList.contains('to-head-box')) {
				this.$refs.content.scrollTop = 0;
			}
		},
		menuClick(path) {
			if (this.nav === 'breadcrumb') this.$refs.breadcrumb.reset(path);
			this.$nextTick(() => this.toRoute(path));
		}
	}
};
</script>

<style>
#content {
	width: 100%;
	height: 100%;
	padding: 0.8rem;
	position: absolute;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #f7f7f7;
}

#content::-webkit-scrollbar {
	display: none;
}

#tab-box {
	left: 0;
	right: 0;
	z-index: 4;
	height: 39px;
	display: flex;
	position: absolute;
	background-color: rgba(249, 248, 253, 1);
}

#breadcrumb-box {
	left: 0;
	right: 0;
	z-index: 4;
	display: flex;
	padding: 0.2rem 1rem;
	position: absolute;
	background-color: white;
	border-bottom: 1px solid #dcdfe6;
	justify-content: space-between;
	align-items: center;
}

.tab-button {
	right: 18px;
	width: 96px;
	font-size: 20px;
	height: 39px;
	position: absolute;
	align-items: center;
	justify-content: space-around;
}

footer.JsFoot {
	color: gray;
	padding: 12px 0;
	text-align: center;
	margin: -56px 0 68px;
	background-color: white;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
